<template>
  <div class="comment-wrapper">
    <div class="comment">
      <el-avatar :size="40" :src="comment.user.avatarUrl + '?param=40y40'"></el-avatar>
      <div
        style="margin-left: 10px;width: 100%; display: flex; flex-direction: column; justify-content: space-around">
        <div class="comment-user-name">
          {{ comment.user.nickname }} <span class="comment-user-content">：{{ comment.content }}</span>
        </div>
        <div class="replied-record" v-if="comment.beReplied && comment.beReplied.length > 0">
          <div v-for="replied in comment.beReplied">
            <span class="nickname">@{{ replied.user.nickname }}</span>：{{ replied.content }}
          </div>
        </div>

        <div>
          <div class="comment-duration">
            {{ comment.time | toDate_yyyy_m_d_hh_mm }}
          </div>
          <div style="float: right; display: flex; align-items: center">
            <span class="report">
               <span>举报</span>
              <div style="display: inline-block; margin: 0 5px; height: 15px; width: 1px; background-color: rgba(255, 255, 255, .25);"></div>
            </span>
            <img :src="goodIcon" alt="" class="good-icon"> <span class="good-likeCount"
                                                                 v-if="comment.likedCount !== 0">{{comment.likedCount}}</span>
            <div style="height: 15px; width: 1px; background-color: rgba(255, 255, 255, .25); margin: 0 5px"></div>
            <img :src="videoShare" alt="" class="share-icon">
            <div style="height: 15px; width: 1px; background-color: rgba(255, 255, 255, .25); margin: 0 5px"></div>
            <img :src="videoComment" alt="" class="comment-icon">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import goodIcon from '@/assets/img/svg/icon24_good_n.svg'
  import videoShare from '@/assets/img/svg/video_share.svg'
  import videoComment from '@/assets/img/svg/video_comment.svg'
  import { toDateString } from 'xe-utils'

  export default {
    name: 'VideoComment',
    data() {
      return {
        goodIcon,
        videoShare,
        videoComment
      }
    },
    methods: {
      toDateString
    },
    props: {
      comment: Object
    }
  }
</script>

<style lang="less" scoped>
  .good-icon, .share-icon, .comment-icon {
    width: 15px;
    height: 15px;
    opacity: .8;
    cursor: pointer;
  }

  .report {
    opacity: 0;

    span {
      color: rgba(0, 0, 0, .8);
      font-size: 13px;
      cursor: pointer;
    }
  }

  .comment {
    display: flex;
    width: 100%;
  }

  .comment-wrapper {
    width: 100%;
    padding: 20px 0;
  }

  .comment-wrapper:hover .report {
    opacity: 1;
    display: flex;
    align-items: center;
  }


  .good-likeCount {
    font-size: 14px;
    padding-top: 4px;
    padding-left: 2px;
    opacity: .8;
    cursor: pointer;
  }

  .comment-duration {
    float: left;
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
  }

  .comment-user-name {
    font-size: 14px;

    color: #409EFF;
    opacity: .8;
  }

  .comment-user-content {
    color: #303133;
    font-size: 13px;
    word-break: break-word;
  }

  .replied-record {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 8px;
    margin: 5px 0;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);

    .nickname {
      color: #409EFF;
      opacity: .8;
    }
  }
</style>
